<template>
    <div>
        <div class="top">
            <div style="position: relative;">
                <!--
                    scrolling是否显示滚动条
                    v-loading.fullscreen.lock 实现加载效果
                 -->
                <iframe ref="iframe"
                        :src="modelerUrl"
                        width="100%"
                        height="800px"
                        scrolling="auto"
                        v-loading.fullscreen.lock="fullscreenLoading"
                        element-loading-text="努力加载中，请等待....">
                </iframe>
                <Spin v-if="isShowSpin" fix>
                    <img src="../../assets/image/loading.gif" height="100" width="100"/>
                    <h3>首次加载较慢，请耐心等待...</h3>
                </Spin>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Modeler",
        data() {
            return {
                modelerUrl:'',
                screenHeight: 0,
                fullscreenLoading: true,
                iframeHeight: 0,
                isShowSpin: true
            }
        },
        created() {
            this.fullscreenLoading = false;
        },
        mounted() {
            let modelId = this.$route.query.modelId;
            this.modelerUrl =  process.env.VUE_APP_BASE_API+"/#/editor/"+modelId+"?modelId="+modelId;

            // 加载中效果
            const { iframe } = this.$refs;
            // IE和非IE浏览器，监听iframe加载事件不一样，需要兼容
            const that = this;
            if (iframe.attachEvent) {
                let that = this;
                // IE
                iframe.attachEvent('onload', () => {
                    that.isShowSpin = false
                });
            } else {
                // 非IE
                iframe.onload = function () {
                    that.isShowSpin = false
                };
            }
        }
    }
</script>
<style scoped>


























    /* /deep/ .el-select{width: auto !important;} */
    /* /deep/ .el-date-editor{width: auto !important;} */






    .itemButton {
        margin-bottom: 8px
    }
</style>
